<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/mui.min.css">
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
	mui.init()
	</script>
	<style type="text/css">
	body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;}
	div.mui-content{background-color: #F1E9DC;}
	p{margin-bottom: 0px;}
	.mui-slider-indicator.mui-segmented-control{
		padding: 5px 10px;
		background: #FFF;
	}
	.mui-segmented-control.mui-scroll-wrapper{
		height: 45px;
	}
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
		width: 100px;
		border: 1px solid #ccc;
		box-shadow:0 0 5px #aaa;
		line-height: 30px;
	}
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active{
		color: #fff;
		background-color: #78909C;
	}
	.mui-fullscreen .mui-segmented-control~.mui-slider-group{
		top: 45px;
	}
	.mui-slider-group .mui-scroll-wrapper{
		padding-top: 5px;
	}
	</style>
</head>

<body>
	
	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">活动展示网</h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<div class="mui-scroll">
			<a class="mui-tab-item " data-index="0">
				<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
				<span class="mui-tab-label">思想学习</span>
			</a>
			<a class="mui-tab-item" data-index="1">
				<span class="mui-icon mui-icon-upload"></span>
				<span class="mui-tab-label">班级活动</span>
			</a>
			<a class="mui-tab-item mui-active" data-index="2">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">最新动态</span>
			</a>
			<a class="mui-tab-item" data-index="3">
				<span class="mui-icon mui-icon-spinner mui-spin"></span>
				<span class="mui-tab-label">学院动态</span>
			</a>
			<a class="mui-tab-item" data-index="4">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">电脑报修</span>
			</a>
		</div>
			
		</nav>
	
	<div class="mui-content">
		<div id="slider" class="mui-slider mui-fullscreen">
			<div class="mui-slider-group">
				
				  
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-grid-view">
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a href="#">
										<img class="mui-media-object" src="img/cbd.jpg">
										<div class="mui-media-body">幸福就是可以一起睡觉</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a href="#">
										<img class="mui-media-object" src="img/cbd.jpg">
										<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a href="#"><img class="mui-media-object" src="img/cbd.jpg">
										<div class="mui-media-body">Color of SIP CBD</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6">
									<a href="#">
										<img class="mui-media-object" src="img/cbd.jpg">
										<div class="mui-media-body">静静看这世界</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div id="maindiv" class="mui-scroll">
							zixing
						</div>
					</div>
				</div>
				
				
				<div class="mui-slider-item mui-control-content mui-active">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media">
									<img src="img/cbd.jpg" style="width:34px">
									<div class="mui-media-body">
										15-4班：主题团会
										<p>发表于 2016-06-30 15:30</p>
									</div>
								</div>
								<div class="mui-card-content" >
									<img src="img/cbd.jpg" alt="" width="100%"/>
									<div class="mui-card-content-inner">
										<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念让读者对文章内容有个粗略的概念...</p>
									</div>
								</div>
								<div class="mui-card-footer">
									<a class="mui-icon mui-icon-flag"></a>
									<a class="mui-icon mui-icon-more"></a>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							自行脑补页面
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							自行脑补页面
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							自行脑补页面
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	mui.ready(function() {
		mui('.mui-scroll-wrapper').scroll({
			bounce: true,
			indicators: true,
			deceleration:mui.os.ios?0.003:0.0009
		});
		mui('.mui-scroll').on('tap','.mui-tab-item:not(.mui-active)',function(){
			mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
		});
	});
	</script>
</body>

</html>